<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jquery.zeroclipboard Demo</title>
  <style type="text/css">
    .btn {
      background-color: blue;
    }
    .btn.hover {
      background-color: green;
    }
    .btn.active {
      background-color: red;
    }
  </style>
  <!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
  <script src="../libs/jquery-loader.js"></script>
  <!-- Load local lib and tests. -->
  <script src="../dist/jquery.zeroclipboard.js"></script>
</head>
<body>
  <div id="demo-space">
    <div id="direct-bindings">
      <h2>Direct bindings:</h2>
      <button id="dir_btn1" class="btn" type="button">beforecopy</button>
      <button id="dir_btn2" class="btn" type="button">copy</button>
      <button id="dir_btn3" class="btn" type="button">aftercopy</button>
    </div>
    <div id="delegate-bindings">
      <h2>Delegate bindings:</h2>
      <button id="del_btn1" class="btn" type="button">beforecopy</button>
      <button id="del_btn2" class="btn" type="button">copy</button>
      <button id="del_btn3" class="btn" type="button">aftercopy</button>
    </div>
  </div>

  <script>
    jQuery(document).ready(function($) {

      $("#direct-bindings .btn")
        .on("beforecopy copy aftercopy", function(e) {
          console.log("Direct binding - " + e.type + " - #" + e.target.id);
          //console.dir(e);
        })
        .on("copy", function(e) {
          e.clipboardData.clearData();
          e.clipboardData.setData("text/plain", "Direct binding - FOO");
          e.clipboardData.setData("text/html", "<b>Direct binding - FOO</b>");
          e.preventDefault();
        });

      $("#delegate-bindings")
        .on("beforecopy copy aftercopy", ".btn", function(e) {
          console.log("Delegate binding - " + e.type + " - #" + e.target.id);
          //console.dir(e);
        })
        .on("copy", ".btn", function(e) {
          e.clipboardData.clearData();
          e.clipboardData.setData("text/plain", "Delegate binding - BAR");
          e.clipboardData.setData("text/html", "<b>Delegate binding - BAR</b>");
          e.preventDefault();
        });
    });
  </script>
</body>
</html>
